<template>
  <div class="home">
    <div class="home-header">
      <h1>欢迎使用 AI Question 前端模板</h1>
      <p class="subtitle">
        基于 Vue 3 + TypeScript + Ant Design Vue 的基础模板
      </p>
    </div>

    <div class="home-content">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :md="8">
          <a-card title="技术栈" :bordered="false">
            <ul class="tech-list">
              <li>Vue 3</li>
              <li>TypeScript</li>
              <li>Vue Router</li>
              <li>Pinia</li>
              <li>Ant Design Vue</li>
              <li>Tailwind CSS</li>
              <li>Axios</li>
            </ul>
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="12" :md="8">
          <a-card title="功能特性" :bordered="false">
            <ul class="feature-list">
              <li>开箱即用的项目结构</li>
              <li>API 自动生成工具</li>
              <li>统一的请求封装</li>
              <li>状态管理支持</li>
              <li>路由配置</li>
              <li>登录/注册页面</li>
            </ul>
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="12" :md="8">
          <a-card title="快速开始" :bordered="false">
            <ol class="start-list">
              <li>安装依赖: <code>npm install</code></li>
              <li>启动开发: <code>npm run serve</code></li>
              <li>生成 API: <code>npm run openapi2ts</code></li>
              <li>替换导入: <code>npm run replace-imports</code></li>
            </ol>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="home-actions">
      <a-space size="large">
        <a-button type="primary" size="large" @click="$router.push('/login')">
          登录
        </a-button>
        <a-button size="large" @click="$router.push('/register')">
          注册
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 首页组件
</script>

<style scoped>
.home {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.home-header {
  text-align: center;
  margin-bottom: 40px;
}

.home-header h1 {
  font-size: 32px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 16px;
  color: #666;
}

.home-content {
  margin-bottom: 40px;
}

.tech-list,
.feature-list,
.start-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tech-list li,
.feature-list li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.tech-list li:last-child,
.feature-list li:last-child {
  border-bottom: none;
}

.start-list li {
  padding: 8px 0;
  line-height: 1.6;
}

.start-list code {
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 14px;
}

.home-actions {
  text-align: center;
  padding-top: 20px;
}

@media (max-width: 768px) {
  .home-header h1 {
    font-size: 24px;
  }

  .home {
    padding: 20px 10px;
  }
}
</style>
